<template>
  <div class="w_right">
                <div class="title">
                    <h3>我的订单</h3>
                </div>
                <div class="chosetype">
                    <ul>
                        <li width="29%">商品</li>
                        <li>订单详细</li>
                        <li>收货人</li>
                        <li>金额</li>
                        <li>状态</li>
                        <li>操作</li>
                    </ul>
                </div>
                <div class="orders" v-for="record in records.records" :key="record.id">
                    <div class="orders_top">
                        <h4>{{record.createTime}}订单编号：{{record.outTradeNo}}</h4>
                        <i></i>
                    </div>
                    <div class="orders_bottom">
                        <div class="orders_left" >
                            <div class="first" v-for="list in record.orderDetailList" :key="list.id">
                                <img :src="list.imgUrl" alt="" width="82px" height="82px">
                                <a href="" class="block-text">{{list.skuName}}</a>
                                <span>x{{list.skuNum}}</span>
                                <a href="">售后申请</a>
                            </div>
                        </div>
                        <div class="center">
                            <span>{{record.consignee}}</span>
                        </div>
                        <div class="center">
                            <ul>
                                <li>总金额¥138.00</li>
                                <li>在线支付</li>
                            </ul>
                        </div>
                        <div class="center">
                            <a href="">{{record.orderStatusName}}</a>
                        </div>
                        <div class="center">
                            <a href="">评价|晒单</a>
                        </div>
                    </div>
                </div>
                
                <Pagination 
                  :pageNo='records.current' 
                  :pageSize='records.size' 
                  :total='records.total' 
                  :continues='5' 
                  @Button_pagin='Button_pagin'
                  v-show="records.total"
                  />
                <div class="like">
                    <h4>猜你喜欢</h4>
                    <ul>
                        <li>
                            <img src="./images/itemlike01.png" alt="">
                            <p>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</p>
                            <span>¥ 3699.00</span>
                            <p>已有6人评价</p>
                        </li>
                        <li>
                            <img src="./images/itemlike02.png" alt="">
                            <p>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</p>
                            <span>¥ 4388.00</span>
                            <p>已有700人评价</p>
                        </li>
                        <li>
                            <img src="./images/itemlike03.png" alt="">
                            <p>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</p>
                            <span>¥ 4088.00</span>
                            <p>已有700人评价</p>
                        </li>
                        <li>
                            <img src="./images/itemlike04.png" alt="">
                            <p>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</p>
                            <span>¥ 4088.00</span>
                            <p>已有700人评价</p>
                        </li>
                    </ul>
                </div>
            </div> 
</template>

<script>
export default {
    name:'MYORDER',
    data() {
        return {
            page:'1',
            limit:'3',
            records:{}
        }
    },
    mounted() {
        this.Getauth()
    },
    computed: {
        getrecords(){
                   return  1
        }
       
    },
    methods: {
        // 获取数据
       async Getauth(){
           let {page,limit} = this;
           let auth =  await this.$API.auth(page,limit)
           if (auth.data.code==200) {
               this.records = auth.data.data
           }
        },

        // 分页器  接收子类传入点击的indx索引
        Button_pagin(pagNum){
            document.documentElement.scrollTop=0
            this.page = pagNum;
             this.Getauth()
        }
    },
}
</script>

<style scoped lang='less'>
 .w_right{
            width: 83.33%;
            box-sizing: border-box;
            margin: 0 20px;
            .title{
                h3{
                    padding: 12px 10px;
                    font-size: 15px;
                    background-color: #f1f1f1;
                }
            }
            .chosetype{
                margin-top: 25px;
                background-color: #f1f1f1;
                ul{
                    display: flex;
                    justify-content: space-around;
                    li{
                        width: 93px;
                        box-sizing: border-box;
                        height: 30px;
                        line-height: 28px;
                        padding-left: 6px;
                    }
                    &>li:first-child{
                        width: 272px;
                    }
                    &>li:nth-child(2){
                        width: 291px;
                    }
                    &>li:nth-child(3){
                        width: 122px;
                    }
                }
            }
            .orders{
                margin-top: 15px;
                border: 1px solid #e6e6e6;
                border-top: 0;
                .orders_top{
                    border-top: 1px solid #e6e6e6;
                    border-bottom: 1px solid #e6e6e6;
                    padding: 6px 8px;
                    background-color: #f4f4f4;
                }
                .orders_bottom{
                    display: flex;
                    .orders_left{
                        width: 555px;
                        border-right: 1px solid #e6e6e6;
                        &>.first:first-child{
                            border-top: 0;
                        }
                        .first{
                            display: flex;
                            padding: 6px 8px;
                            border-top: 1px solid #e6e6e6;
                            .block-text{
                                min-width: 80px;
                                max-width: 250px;
                                color: #e1251b;
                                margin-left: 10px;
                            }
                            span{
                                margin-left: 40px;
                            }
                            a{
                                margin-left: 40px;
                            }
                        }
                    }
                    .center{
                        padding: 0px 8px;
                        text-align: center;
                        box-sizing: border-box;
                        border-right: 1px solid #e6e6e6;
                        line-height: 1.5;
                        // line-height: 200px;
                        // align-self:center;
                        // height: 50px;
                        flex: 1;
                        flex-shrink: 1;
                        flex-grow: 1;
                        flex-basis:20px;
                        line-height: 100% px;
                    }
                    &>div:nth-child(2){
                         display: flex;
                           justify-content: center;
                        width: 75px;
                        span{
                            align-self: center;
                        }
                    }
                    &>div:nth-child(3){
                        display: flex;
                        justify-content: center;
                        width: 138px;
                        ul{
                           align-self: center;
                            li{
                                line-height: 18px;
                            }
                        }
                    }
                    &>div:nth-child(4){
                          display: flex;
                           justify-content: center;
                        width: 75px;
                        a{
                            align-self: center;
                        }
                    }
                    &>div:nth-child(5){
                        width: 121px;
                         display: flex;
                           justify-content: center;
                        border-right: 0;
                         a{
                            align-self: center;
                        }
                    }
                }
            }
            .choose-order{
                margin-top: 40px;
                ul{
                    display: flex;
                    li{
                        display: inline-block;
                        padding: 4px 9px;
                        font-size: 14px;
                        border: 1px solid #28a3ef;
                        border-left: 0;
                    }
                    &>li:first-child{
                        background-color: #fafafa;
                        border: 1px solid #e0e9ee;
                    }
                    &>li:nth-child(2){
                        background-color: #28a3ef;
                        a{
                            color: #fff;
                        }
                    }
                    &>li:nth-child(6){
                        background-color: #fafafa;
                        border: 1px solid #e0e9ee;
                    }
                    &>li:nth-child(7){
                        border: 0;
                        margin-left: 10px;
                    }
                    a:hover{
                        text-decoration: underline;
                        color: red;
                    }
                }
            }
            .like{
                border: 1px solid #ddd;
                margin-top: 20px;
                h4{
                    background: #f1f1f1;
                    padding: 12px;
                    font-size: 15px;
                    color: #666;
                    border-bottom: 1px solid #ddd;
                }
                ul{
                    display: flex;
                    padding: 15px 11px;
                    li{
                        width: 25%;
                        span{
                            height: 20px;
                            display: inline-block;
                            color: #c81623;
                            font-size: 16px;
                            margin-left: 15px;
                        }
                        p{
                            margin-left: 15px;
                        }
                        &>p:last-child{
                            margin-top: 15px;
                        }
                    }
                }
            }
        }
</style>